<!--
 * @Description: 
 * @Author: dh
 * @Date: 2021-08-19 17:18:39
 * @LastEditors: dh
 * @LastEditTime: 2021-09-15 10:07:03
-->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>margin-padding</title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		html,
		body {
			height: 100%;
		}

		#wrap {
			min-height: 100%;
			background: pink;
			text-align: center;
			overflow: hidden;
		}

		#wrap .main {
			padding-bottom: 50px;
		}

		#footer {
			height: 50px;
			line-height: 50px;
			background: deeppink;
			text-align: center;
			margin-top: -50px;
		}
	</style>

	<body>
		<div id="wrap">
			<div class="main">main</div>
		</div>
		<div id="footer">footer</div>
	</body>
</html>
